<template>
	<view class="gui-relative" style="height:100vh;background: linear-gradient(90deg,#a5d8ff,#e7f5ff);">
		<view>
			<view class="gui-border-box gui-relative gui-padding">
				<view class="" v-for="(c,index) in specials" :key="index">
					<view class="gui-h4 gui-bold">
						{{c.name}}
					</view>
					<view class="gui-text">
						{{c.content}}
					</view>
					<view class="gui-margin-top" v-if="c.category=='image'">
						<image :src="c.url" mode="widthFix" style="width:690rpx;border-radius: 24rpx;"></image>
					</view>
					<view class="gui-margin-top" v-if="c.category=='video'">
						 <video id="myVideo" :src="c.url" style="width:690rpx;border-radius: 24rpx;"
						 enable-danmu danmu-btn controls></video>
					</view>
					<u-divider text="···"></u-divider>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import {ref} from 'vue'
	import useConfig from '@/api/config'
	const { config, getConfig } = useConfig()
	const specials=ref([])
	const init = async () => {
		await getConfig()
		specials.value = config.value.specials
	}
	init()
</script>
<style scoped lang="scss">
	.custom-style {
		color: white;
		background-color: red;
	}

	.pay-btn {
		height: 180rpx;
		line-height: 180rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		-webkit-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);

		.pay-btn-warp {
			padding: 0 30rpx;
			width: 700rpx;
		}
	}
</style>